<template>
	<span class="bookmes">
		<p>书本编号:{{book_bid}}</p>
		<p>库存:{{book_num}}</p>
		<p>销量:{{book_sale}}</p>
		<p>浏览量:{{book_look}}</p>
	</span>
	<div class="book_detail">
		<img :src="require('@/assets/img/'+book_pic+'.jpg')" class="book-pic" />
		<p class="book-name">图&ensp;书&ensp;名:&lt;&lt;{{book_name}}>></p>
		<p class="book-type">类&ensp;&ensp;&ensp;&ensp;型:{{book_type}}</p>
		<p class="book-balance">原&ensp;&ensp;&ensp;&ensp;价:{{book_balance}} 元</p>
		<p class="book-membalance">会&ensp;员&ensp;价:{{book_membalance}} 元</p>
		<el-button type="primary" @click="addbookcar()" class="to-buy">立即购买</el-button>
		<div>
			<p class="book-intro">简&ensp;&ensp;&ensp;&ensp;介:{{book_intro}}</p>
		</div>
	</div>

	<div class="book_review">
		<p class="review" style="font-size: 20px;color: black;">评论区</p>
		<el-table :data="reviewList" style="width: 100%;bottom: 0px;" border @selection-change="handleSelectionChange"
			:row-class-name="tableRowClassName" :show-header="false">
			<el-table-column prop="userMessage.name" width="100px" header-align="center">
			</el-table-column>
			<el-table-column prop="book_review" width="" header-align="center">
			</el-table-column>
		</el-table>
		<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="user_rev" style="width: 900px;">
		</el-input>
		<el-button type="primary" @click="review()" class="to-buy" style="margin-left: 840px;margin-top: 10px;">发布
		</el-button>
	</div>

</template>

<script type="text/javascript">
	import axios from 'axios';
	export default {
		name: "Detail",
		data() {
			return {
				book_name: '',
				book_intro: '',
				book_membalance: '',
				book_balance: '',
				book_type: '',
				book_bid: '',
				book_look: '',
				username: '',
				user_rev: '',
				reviewList: []
			}
		},
		created() {
			this.book_pic = this.$route.query.book_pic
			this.book_name = this.$route.query.book_name
			this.book_intro = this.$route.query.book_intro
			this.book_membalance = this.$route.query.book_membalance
			this.book_balance = this.$route.query.book_balance
			this.book_type = this.$route.query.book_type
			this.book_bid = this.$route.query.book_bid
			this.book_num = this.$route.query.book_num
			this.book_sale = this.$route.query.book_sale
			this.book_look = this.$route.query.book_look
			this.getreview()
		},
		methods: {
			addbookcar() {
				axios.post('http://localhost:8080/bookcar/addBookCar', 'bid=' + this.book_bid + '&book_name=' +
						this.book_name + '&book_balance=' + this.book_balance +
						'&book_pic=' +
						this.book_pic + '&book_membalance=' + this.book_membalance)
					.then(res => {
						alert(res.data)
					})
			},
			review() {
				if (this.user_rev.trim() == "") {
					alert("请发布内容")
				} else if (this.user_rev.trim().length > 50) {
					alert("字数限制50字...")
				} else {
					axios.post('http://localhost:8080/review/addreview', 'book_bid=' + this.book_bid + '&book_review=' +
							this.user_rev)
						.then(res => {
							alert(res.data)
							this.user_rev = ''
							this.getreview();
						})
				}
			},
			getreview() {
				axios.post('http://localhost:8080/review/getreview', 'book_bid=' + this.book_bid )
					.then(res => {
						this.reviewList=res.data
					})
			}
		}
	}
</script>

<style type="text/css">
	.bookmes {
		display: inline-block;
		border-bottom: 1px solid black;
		width: 950px;
		height: 100px;
	}

	.book_detail {
		width: 950px;
		height: 400px;
		margin-left: 250px;
	}

	.book_review {
		width: 900px;
		margin-left: 300px;
	}

	.bookmes p {
		float: left;
		margin-top: 50px;
		margin-left: 120px;
	}

	.book-pic {
		float: left;
		width: 200px;
		height: 200px;
		margin-top: 50px;
		margin-left: 100px;
	}

	.book-name {
		border-bottom: 1px dashed lightgray;
		font-size: 15px;
		float: left;
		margin-left: 50px;
		margin-top: 50px;
		height: 25px;
		width: 500px;
	}

	.book-type {
		font-size: 15;
		right: 300px;
		width: 500px;
		margin-top: 20px;
		margin-left: 50px;
		height: 26;
		float: left;

		border-bottom: 1px dashed lightgray;
	}

	.book-balance {
		font-size: 16;
		color: red;
		text-decoration: line-through;
		float: left;
		margin-left: 50px;
		width: 500px;
		margin-top: 20px;
		height: 25px;
		border-bottom: 1px dashed lightgray;
	}


	.book-membalance {
		font-size: 15px;
		float: left;
		margin-left: 50px;
		width: 500px;
		margin-top: 20px;
		height: 10px;
	}

	.book-intro {
		float: left;
		font-size: 20px;
		width: 800px;
		margin-left: 100px;
		margin-top: 20px;
		line-height: 40px;

	}

	.to-buy {
		float: left;
		margin-top: 60px;
	}

	.review {
		float: left;
		width: 900px;
		height: 40px;
		line-height: 40px;
		border: 1px solid lightgrey;
		z-index: 999;
	}
</style>
